<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>vue模板语块</title>
</head>

<body>
    <h1>课堂总结</h1>
    <div id="app1">
        <h2>v-text:</h2>
        <div>Hello,{{text}}</div>
        <div v-text="text">你好,</div>
        <div v-text="html"></div>
        <p><b>总结：v-text的内容会覆盖原html标签内的文本，此外,v-text的内容含有html标签，会将标签一并输出</b></p>
        <hr>
        <h2>v-html:</h2>
        <div v-html="html">11</div>
        <div v-html="html2">11</div>
        <p><b>总结：v-html的内容会覆盖原html标签内的文本，此外,v-html相当于innerHTML,标签的样式也会一并输出</b></p>
    </div>
    <hr>
    <div id="app2">
        <h2>v-bind:</h2>
        <p>自定义额外id参数:</p>
        <div v-bind:id="'0_'+id+'_1'">原id为：{{id}}, <b> 打开F12,此时quq的id为id="0_quq_1"</b></div>
        <p>同理,也可自定义额外class参数:</p>
        <div v-bind:class="class1"><b> 打开F12,此时这个标签加上了class="class1"</b></div>
        <p>给一个a绑定href属性：</p>
        <a v-bind:href="url">百度</a>
        <p>显示/不显示</p>
        <div v-bind:disabled="disabled">div是否还显示 //无效......</div>
        <button v-bind:disabled="disabled">按钮</button> //disabled的值为true,则按钮变灰
    </div>
    <hr>
    <app id="app3">
        <p>trim()方法去空格：</p>
        <div>{{message.trim()}}</div>
        <div>{{echo(message)}} //echo，F12查看代码有前后空格，将message的值输出了</div>
    </app>
    <hr>
    <div id="app4">
        <p>条件渲染 v-if/v-else-if/v-else:</p>
        <div v-if="result">if显示</div>
        <!-- <div v-else-if="result">else if 1显示</div> -->
        <div v-else="result">else 显示</div>
        <p><b>result 的值：为false就显示else,为true显示if的值</b></p>

        <p>v-show:</p>
        <div v-show="result1">
            此处v-show为true,
            而当v-show为false时，仅仅是将元素的display属性设置为none而已。
        </div>
    </div>
    <hr>
    <div id="app5">
        <div v-on:click="click">div点击我</div>
        <button @click="click">button点击我</button>
    </div>
</body>
<script>
    let app1 = new Vue({
        el: "#app1",
        data: {
            text: "Vue",
            html: "<h2>Hello,Vue</h2>",
            html2: '<span style="color:red">Hello Vue</span>'
        }
    })

    let app2 = new Vue({
        el: "#app2",
        data: {
            id: "quq",
            url: "http://www.baidu.com",
            class1: '111',
            disabled: true,
        }
    })

    let app3 = new Vue({
        el: "#app3",
        data: {
            message: "        我的前后都有空格       ",
        },
        methods: {
            echo: function (a) {
                let b = a;
                return b;
            }
        }
    })

    let app4 = new Vue({
        el: "#app4",
        data: {
            result: false,
            result1: true
        }
    })

    let app5 = new Vue({
        el: "#app5",
        methods: {
        click:function() {
            alert("click");
        }
        }
    })
</script>

</html>